<template>
	<view class="map-page">
		<!-- 头部导航 -->
		<view class="header">
			<image class="gd-icon" @click="goBack" src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-map-gb.png" mode=""></image>
			<text class="title">PAWS ON TOUR 宠物友好巡游季</text>
		</view>
		
		<!-- 页面内容区域 - 可滚动的长图背景 -->
		<scroll-view class="content" scroll-y="true" :show-scrollbar="false">
			<!-- 长图背景容器 -->
			<view class="long-image-container">
				<view class="long-activity-map"  mode="widthFix"></view>
				<!-- 等宽等高的内容盒子 - 覆盖在长图上方 -->
				<view class="content-overlay">
				<!-- 集章器背景 -->
				<view class="activity-chapter-bg"  mode="widthFix"></view>
				<!-- 集章器内容容器 - 浮于集章器背景上方 -->
				<view class="chapter-content-overlay">
					<!-- 我的集章文字 -->
					<text class="my-chapter-text">我的集章：{{ stampCount }}个</text>
					<!-- 我的报名按钮 -->
					<view class="my-signup-btn" @click="goToMyEnroll">
						<text class="signup-btn-text">我的报名</text>
					</view>
					<!-- 集章图标容器 -->
					<view class="chapter-icons-container">
						<image 
							class="chapter-icon" 
							:src="icon.src" 
							mode="aspectFit" 
							v-for="(icon, index) in chapterIcons" 
							:key="index">
						</image>
					</view>
				</view>
					<!-- 活动规则按钮 -->
					<view class="activity-rules-btn"  mode="widthFix" @click="showRules"></view>
					<!-- 店铺组合列表 -->
					<view 
						class="shop-item" 
						:class="`shop-item-${index + 1}`"
						v-for="(merchant, index) in activityList" 
						:key="merchant.activity_id"
						@click="goToActivityDetail(merchant.activity_id)">
						<!-- 店名背景 -->
						<view class="shop-bg"  mode="widthFix"></view>
						<!-- 猫抓图片 -->
						<view class="shop-cat" :class="getCatIcon(merchant.do_status)" mode="view"></view>
						<!-- 店名文字 -->
						<text class="shop-name">{{ merchant.merchant_name }}</text>
						<!-- 店铺icon -->
						<view class="shop-icon" :class="getShopIcon(merchant.status)" mode="widthFix"></view>
						<!-- 状态icon -->
						<view class="shop-status" :class="getShopStatusIcon(merchant.status)" mode="widthFix"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 活动规则弹窗 -->
		<view v-if="showRulesModal" class="rules-modal-overlay" @click="closeRules">
			<view class="rules-modal" @click.stop>
				<!-- 弹窗背景 -->
				<view class="rules-modal-bg"  mode="widthFix"></view>
				<!-- 关闭按钮 -->
				<view class="rules-close-btn" @click="closeRules"></view>
				<!-- 标题 -->
				<view class="rules-title">活动规则</view>
				<!-- 内容区域 -->
				<scroll-view class="rules-content" scroll-y="true">
					<text class="rules-text">「PAWS ON TOUR 宠物友好巡游季」是由一尺花园与SEEWOW联合举办的系列宠物主题活动。我们将10场不同主题的宠物课程包装成趣味巡游站点，邀请您和爱宠共同参与。完成课程打卡，收集电子印章，即可兑换丰厚奖励，让TA的成长被看见！

活动规则：
用户需通过本小程序预约报名各场次课程。
每成功参加一场课程并完成现场打卡，即可获得一枚该课程的专属电子印章。
电子印章永久累积，达到不同数量可兑换不同等级的奖励。
奖励兑换需在活动期内（截至2025年12月31日）于小程序内发起申请。
所有活动名额先到先得，报满即止。</text>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			stampCount: 0,
			activityList: [],
			loading: false,
			showRulesModal: false ,// 控制活动规则弹窗显示
		}
	},
	
	onLoad() {
		this.loadActivityList()
	},
	computed: {
		// 根据集章数量动态生成图标数组
		chapterIcons() {
			const icons = []
			for (let i = 0; i < 10; i++) {
				if (i < this.stampCount) {
					// 已集章的图标
					icons.push({
						src: 'https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-mz-ydk.png'
					})
				} else {
					// 未集章的图标
					icons.push({
						src: 'https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-map-mz-wdk.png'
					})
				}
			}
			return icons
		}
	},
	methods: {
		// 返回首页
		goBack() {
			uni.reLaunch({
				url: '/pages/index/index'
			})
		},
		
		// 加载活动列表数据
		async loadActivityList() {
			this.loading = true;
			const res = await this.$request.get('api/activity/garden_lists')
			if (res.code == 200) {
				this.activityList = res.data.activity_list;
				this.stampCount = res.data.stamp_count;
				this.loading = false;
			}
		},
		
		// 根据店铺状态获取状态图标
		//1-可预约 2-报名中 3-签到 4-已结束 gd-kqd.png
		getShopStatusIcon(status) {
			switch (status) {
				case 4: // 已结束
					return 'end'
				case 3: // 已结束
					return 'kqd'
				case 2: // 报名中
					return 'bmz'
				case 1: // 可预约
					return 'kyy'
				default:
					return 'kyy'
			}
		},
		
		// 根据店铺状态获取店铺图标
		getShopIcon(status) {
			return status == 4 ? 'shop-icon-end' :'shop-icon-ing';
		},
		//1-已打卡 2-未打卡
		getCatIcon(doStatus) {
			return doStatus ? "shop-cat-ydk " : "shop-cat-wdk";
		},
		
		// 跳转到活动详情页面
		goToActivityDetail(activityId) {
			if (!activityId) {
				uni.showToast({
					title: '活动信息不存在',
					icon: 'none'
				})
				return
			}
			let go_url ="/pages/garden/index?activity_id="+activityId;
			uni.navigateTo({
				url: go_url
			})
		},
		
		// 显示活动规则弹窗
		showRules() {
			this.showRulesModal = true
		},
		
		// 关闭活动规则弹窗
		closeRules() {
			this.showRulesModal = false
		},
		
		// 跳转到我的报名页面
		goToMyEnroll() {
			uni.navigateTo({
				url: '/pages/garden/enroll'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.map-page {
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	
	// 移除原来的全屏背景图片样式
	// .activity-map-bg {
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 100%;
	// 	z-index: 1;
	// }
	
	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 108rpx 0rpx 32rpx 0rpx;
		text-align: center;
		z-index: 999;
		background: rgba(255, 255, 255, 0.9); // 添加半透明背景确保头部可见
		
		.gd-icon {
			margin-top: -13rpx;
			width: 64rpx;
			height: 64rpx;
			position: absolute;
			left: 12rpx;
		}
		
		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.content {
		flex: 1;
		position: relative;
		z-index: 10;
		margin-top: 188rpx; // 为固定头部预留空间
		
		.long-image-container {
			width: 100%;
			position: relative;
			
			.long-activity-map {
				width: 750rpx;
				height: 3492rpx;
				display: block;
				margin: 0 auto;
				background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/activity-map.png);
				background-size: 100% 100%;
			}
			
			// 等宽等高的内容盒子
			.content-overlay {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 750rpx;
				height: 3492rpx;
				z-index: 20;
				pointer-events: none; // 默认不阻止背景图的交互
				
				// 集章器背景样式
				.activity-chapter-bg {
					position: absolute;
					top: 16rpx;
					left: 30rpx;
					width: 692rpx;
					height: 284rpx;
					pointer-events: auto; // 允许交互
					background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-jzb.png);
					background-size:100% 100% ;
				}
				
				// 集章器内容容器 - 与背景等高等宽，浮于上方
				.chapter-content-overlay {
					position: absolute;
					top: 16rpx; // 与集章器背景相同位置
					left: 30rpx; // 与集章器背景相同位置
					width: 692rpx; // 与集章器背景相同宽度
					height: 284rpx; // 与集章器背景相同高度
					z-index: 25; // 高于集章器背景的z-index
					pointer-events: auto; // 允许交互
					// background: rgba(255, 0, 0, 0.1); // 调试用红色半透明背景，开发完成后删除
					
					// 我的集章文字样式
					.my-chapter-text {
						position: absolute;
						top: 64rpx; // 距离上 64rpx
						left: 40rpx; // 距离左 40rpx
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #262626;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					
					// 我的报名按钮样式
					.my-signup-btn {
						position: absolute;
						top: 54rpx; // 距离上 54rpx
						left: 484rpx; // 距离左 484rpx
						width: 168rpx;
						height: 62rpx;
						background: #FFDA61;
						border-radius: 82rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.signup-btn-text {
							font-size: 28rpx;
							color: #262626;
							font-weight: 500;
						}
					}
					
					// 集章图标容器样式
					.chapter-icons-container {
						position: absolute;
						top: 160rpx; // 文字下方适当位置
						left: 40rpx; // 距离左边 40rpx
						width: 598rpx; // 容器宽 598rpx
						height: 52rpx; // 容器高 52rpx
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.chapter-icon {
							width: 58rpx; // 单个icon宽度
							height: 52rpx; // 单个icon高度
						}
					}
				}
				
				// 活动规则按钮样式
				.activity-rules-btn {
					position: absolute;
					top: 316rpx; // 集章器背景高度284rpx + 间距16rpx + 顶部16rpx = 316rpx
					left: 620rpx;
					width: 130rpx;
					height: 64rpx;
					pointer-events: auto; // 允许交互
					background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-map-hdgz.png);
					background-size: 100% 100%;
				}
				
				// 店铺组合通用样式
				.shop-item {
					position: relative;
					pointer-events: auto;
					
					// 店名背景
					.shop-bg {
						position: absolute;
						width: 324rpx;
						height: 84rpx;
						pointer-events: auto;
						background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-map-dm-bg.png);
						background-size: 100% 100%;
					}
					
					// 猫抓图片
					.shop-cat {
						position: absolute;
						width: 60rpx; // 根据实际图片调整
						height: 60rpx; // 根据实际图片调整
						z-index: 2;
						pointer-events: auto;
					}
					.shop-cat-ydk {
						background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-mz-ydk.png);
						background-size: 100% 100%;
					}
					.shop-cat-wdk {
						background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-map-mz-wdk.png);
						background-size: 100% 100%;
					}
					// 店名文字
					.shop-name {
						position: absolute;
						width: 168rpx;
						height: 36rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #262626;
						text-align: center;
						font-style: normal;
						text-transform: none;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 3;
						pointer-events: auto;
					}
					
					// 店铺icon
					.shop-icon {
						margin-top: 35rpx;
						position: absolute;
						width: 254rpx;
						height: 204rpx;
						z-index: 4;
						pointer-events: auto;
					}
					.shop-icon-ing{
						background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-dk-kdj.png);
						background-size: 100% 100%;
					}
					.shop-icon-end{
						background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-dk-bkdj.png);
						background-size: 100% 100%;
					}
					
					// 状态icon
					.shop-status {
						margin-top: 5rpx;
						position: absolute;
						width: 174rpx;
						height: 64rpx;
						z-index: 5;
						pointer-events: auto;
					}
					.kyy{
						background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-map-zt-kyy.png);
						background-size: 100% 100%;
					}
					.bmz{
						background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-map-zt-bmz.png);
						background-size: 100% 100%;
					}
					.kqd{
						background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-map-zt-kqd.png);
						background-size: 100% 100%;
					}
					.end{
						background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-map-zt-yjs.png);
						background-size: 100% 100%;
					}
				}
				
				// 店铺组合定位 - 使用transform便于整体微调
				// 第一个店铺 (右边) - 基础坐标: x=394rpx, y=556rpx
				.shop-item-1 {
					margin-top: 70rpx;
					transform: translate(0rpx, 0rpx); // 微调偏移量: x偏移, y偏移
					
					.shop-bg {
						top: 556rpx;
						left: 394rpx;
					}
					
					.shop-cat {
						top: 552rpx;
						left: 402rpx;
					}
					
					.shop-name {
						top: 578rpx;
						left: 472rpx;
					}
					
					.shop-icon {
						top: 598rpx;
						left: 429rpx;
					}
					
					.shop-status {
						top: 822rpx;
						left: 469rpx;
					}
				}
				
				// 第二个店铺 (左边) - 基础坐标: x=32rpx, y=1000rpx
				.shop-item-2 {
					margin-top: -300rpx;
					transform: translate(0rpx, 0rpx); // 微调偏移量: x偏移, y偏移
					
					.shop-bg {
						top: 1000rpx;
						left: 32rpx;
					}
					
					.shop-cat {
						top: 996rpx;
						left: 40rpx;
					}
					
					.shop-name {
						top: 1022rpx;
						left: 110rpx;
					}
					
					.shop-icon {
						top: 1042rpx;
						left: 67rpx;
					}
					
					.shop-status {
						top: 1266rpx;
						left: 107rpx;
					}
				}
				
				// 第三个店铺 (右边) - 基础坐标: x=394rpx, y=1450rpx
				.shop-item-3 {
					margin-top: -170rpx;
					transform: translate(0rpx, -50rpx); // 微调偏移量: x偏移, y偏移
					
					.shop-bg {
						top: 1450rpx;
						left: 394rpx;
					}
					
					.shop-cat {
						top: 1446rpx;
						left: 402rpx;
					}
					
					.shop-name {
						top: 1472rpx;
						left: 472rpx;
					}
					
					.shop-icon {
						top: 1492rpx;
						left: 429rpx;
					}
					
					.shop-status {
						top: 1716rpx;
						left: 469rpx;
					}
				}
				
				// 第四个店铺 (左边) - 基础坐标: x=32rpx, y=1900rpx
				.shop-item-4 {
					margin-top: -620rpx;
					margin-left: -20rpx;
					transform: translate(0rpx, 0rpx); // 微调偏移量: x偏移, y偏移
					
					.shop-bg {
						top: 1900rpx;
						left: 32rpx;
					}
					
					.shop-cat {
						top: 1896rpx;
						left: 40rpx;
					}
					
					.shop-name {
						top: 1922rpx;
						left: 110rpx;
					}
					
					.shop-icon {
						top: 1942rpx;
						left: 67rpx;
					}
					
					.shop-status {
						top: 2166rpx;
						left: 107rpx;
					}
				}
				
				// 第五个店铺 (右边) - 基础坐标: x=394rpx, y=2350rpx
				.shop-item-5 {
					margin-top: -620rpx;
					transform: translate(0rpx, -100rpx); // 微调偏移量: x偏移, y偏移
					
					.shop-bg {
						top: 2350rpx;
						left: 394rpx;
					}
					
					.shop-cat {
						top: 2346rpx;
						left: 402rpx;
					}
					
					.shop-name {
						top: 2372rpx;
						left: 472rpx;
					}
					
					.shop-icon {
						top: 2392rpx;
						left: 429rpx;
					}
					
					.shop-status {
						top: 2616rpx;
						left: 469rpx;
					}
				}
				
				// 第六个店铺 (左边) - 基础坐标: x=32rpx, y=2800rpx
				.shop-item-6 {
					transform: translate(0rpx, -400rpx); // 微调偏移量: x偏移, y偏移
					
					.shop-bg {
						top: 2800rpx;
						left: 32rpx;
					}
					
					.shop-cat {
						top: 2796rpx;
						left: 40rpx;
					}
					
					.shop-name {
						top: 2822rpx;
						left: 110rpx;
					}
					
					.shop-icon {
						top: 2842rpx;
						left: 67rpx;
					}
					
					.shop-status {
						top: 3066rpx;
						left: 107rpx;
					}
				}
				
				// 第七个店铺 (右边) - 基础坐标: x=394rpx, y=3250rpx
				.shop-item-7 {
					transform: translate(0rpx, -400rpx); // 微调偏移量: x偏移, y偏移
					
					.shop-bg {
						top: 3250rpx;
						left: 394rpx;
					}
					
					.shop-cat {
						top: 3246rpx;
						left: 402rpx;
					}
					
					.shop-name {
						top: 3272rpx;
						left: 472rpx;
					}
					
					.shop-icon {
						top: 3292rpx;
						left: 429rpx;
					}
					
					.shop-status {
						top: 3516rpx;
						left: 469rpx;
					}
				}
				
				// 第八个店铺 (左边) - 基础坐标: x=32rpx, y=3700rpx
				.shop-item-8 {
					transform: translate(0rpx, -800rpx); // 微调偏移量: x偏移, y偏移
					
					.shop-bg {
						top: 3700rpx;
						left: 32rpx;
					}
					
					.shop-cat {
						top: 3696rpx;
						left: 40rpx;
					}
					
					.shop-name {
						top: 3722rpx;
						left: 110rpx;
					}
					
					.shop-icon {
						top: 3742rpx;
						left: 67rpx;
					}
					
					.shop-status {
						top: 3966rpx;
						left: 107rpx;
					}
				}
				
				// 第九个店铺 (右边) - 基础坐标: x=394rpx, y=4150rpx
				.shop-item-9 {
					transform: translate(0rpx, -820rpx); // 微调偏移量: x偏移, y偏移
					
					.shop-bg {
						top: 4150rpx;
						left: 394rpx;
					}
					
					.shop-cat {
						top: 4146rpx;
						left: 402rpx;
					}
					
					.shop-name {
						top: 4172rpx;
						left: 472rpx;
					}
					
					.shop-icon {
						top: 4192rpx;
						left: 429rpx;
					}
					
					.shop-status {
						top: 4416rpx;
						left: 469rpx;
					}
				}
				
				// 第十个店铺 (左边) - 基础坐标: x=32rpx, y=4600rpx
				.shop-item-10 {
					transform: translate(0rpx, -1100rpx); // 微调偏移量: x偏移, y偏移
					
					.shop-bg {
						top: 4600rpx;
						left: 32rpx;
					}
					
					.shop-cat {
						top: 4596rpx;
						left: 40rpx;
					}
					
					.shop-name {
						top: 4622rpx;
						left: 110rpx;
					}
					
					.shop-icon {
						top: 4642rpx;
						left: 67rpx;
					}
					
					.shop-status {
						top: 4866rpx;
						left: 107rpx;
					}
				}
				
				/* 
				后续店铺定位样式模板 - 复制并修改数字和坐标即可使用
				
				.shop-item-2 {
					.shop-bg {
						top: XXXrpx; // 根据设计稿调整
						left: XXXrpx;
					}
					.shop-cat {
						top: XXXrpx; // 比shop-bg的top小4rpx
						left: XXXrpx; // 比shop-bg的left大8rpx
					}
					.shop-name {
						top: XXXrpx; // shop-bg的top + 24rpx (垂直居中)
						left: XXXrpx; // shop-bg的left + 78rpx (水平居中)
					}
					.shop-icon {
						top: XXXrpx; // shop-name的top + 20rpx (店名下方20rpx)
						left: XXXrpx; // shop-bg的left + 35rpx (水平居中)
					}
					.shop-status {
						top: XXXrpx; // shop-icon的top + 204rpx + 20rpx (店铺icon下方)
						left: XXXrpx; // shop-bg的left + 75rpx (水平居中)
					}
				}
				*/
				
				// 如果需要在某些区域添加交互，可以在子元素中设置 pointer-events: auto;
			}
		}
	}
}

// 活动规则弹窗样式
.rules-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.rules-modal {
	position: relative;
	width: 610rpx;
	height: 726rpx;
}

.rules-modal-bg {
	width: 100%;
	height: 100%;
	background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-map-tq.png);
	background-size: 100% 100%;
}

.rules-close-btn {
	position: absolute;
	top: 32rpx;
	left: 546rpx;
	width: 32rpx;
	height: 32rpx;
	background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/gd-map-gb.png);
	background-size: 100% 100%;
	
	image {
		width: 100%;
		height: 100%;
	}
}

.rules-title {
	position: absolute;
	top: 64rpx; // 距离关闭按钮上32rpx
	left: 0;
	width: 100%;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #262626;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.rules-content {
	position: absolute;
	top: 130rpx; // 标题下方留出空间
	left: 74rpx; // 居中对齐，(610-462)/2 = 74rpx
	width: 462rpx;
	height: 462rpx;
}

.rules-text {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #7B7B7B;
	line-height: 42rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	display: block;
	white-space: pre-line; // 支持换行
}
</style>